<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>PageHeader 页头</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons-vue.js"></script>
<style type="text/css">
.example-link{
	margin-left: 20px;
}
.example-link-icon{
	margin-right: 4px;
}

</style>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">标准样式</a-divider><!-- =============================================================== -->
	<p class="desc">标准页头，适合使用在需要简单描述的场景。</p>
	<!-- <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="Title" sub-title="This is a subtitle" @back="() => null"></a-page-header> -->
	<a-page-header style="border: 1px solid rgb(235, 237, 240)" title="Title" sub-title="This is a subtitle" @back="backPage()"></a-page-header>
	
	
	<a-divider class="a-divi" orientation="left">带面包屑页头</a-divider><!-- =============================================================== -->
	<p class="desc">带面包屑页头，适合层级比较深的页面，让用户可以快速导航。</p>
	<a-page-header style="border: 1px solid rgb(235, 237, 240)" title="Title" :breadcrumb="{ routes }" sub-title="This is a subtitle"></a-page-header>
	
	
	<a-divider class="a-divi" orientation="left">多种形态的 PageHeader</a-divider><!-- =============================================================== -->
	<p class="desc">使用操作区，并自定义子节点，适合使用在需要展示一些复杂的信息，帮助用户快速了解这个页面的信息和操作。</p>
	<div>
		<a-page-header class="demo-page-header" style="border: 1px solid rgb(235, 237, 240)" title="Title"
			sub-title="This is a subtitle" @back="() => $router.go(-1)">
			<template #extra>
				<a-button key="3">Operation</a-button>
				<a-button key="2">Operation</a-button>
				<a-button key="1" type="primary">Primary</a-button>
			</template>
			<a-descriptions size="small" :column="3">
				<a-descriptions-item label="Created">Lili Qu</a-descriptions-item>
				<a-descriptions-item label="Association"><a>421421</a></a-descriptions-item>
				<a-descriptions-item label="Creation Time">2017-01-10</a-descriptions-item>
				<a-descriptions-item label="Effective Time">2017-10-10</a-descriptions-item>
				<a-descriptions-item label="Remarks">Gonghu Road, Xihu District, Hangzhou, Zhejiang, China</a-descriptions-item>
			</a-descriptions>
		</a-page-header>
		<br />
		<a-page-header title="Title" sub-title="This is a subtitle" @back="() => $router.go(-1)">
			<template #tags>
				<a-tag color="blue">Running</a-tag>
			</template>
			<template #extra>
				<a-button key="3">Operation</a-button>
				<a-button key="2">Operation</a-button>
				<a-button key="1" type="primary">Primary</a-button>
			</template>
			<a-row type="flex">
				<a-statistic title="Status" value="Pending"></a-statistic>
				<a-statistic title="Price" prefix="$" :value="568.08" :style="{ margin: '0 32px', }"></a-statistic>
				<a-statistic title="Balance" prefix="$" :value="3345.08"></a-statistic>
			</a-row>
		</a-page-header>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">组合示例</a-divider><!-- =============================================================== -->
	<p class="desc">使用了 PageHeader 提供的所有能力。</p>
	<div class="components-page-header-demo-content">
		<a-page-header title="Title" class="site-page-header" sub-title="This is a subtitle"
			:avatar="{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }" :breadcrumb="{ routes }">
			<template #tags>
				<a-tag color="blue">Running</a-tag>
			</template>
			<template #extra>
				<a-button key="3">Operation</a-button>
				<a-button key="2">Operation</a-button>
				<a-button key="1" type="primary">Primary</a-button>
				<a-dropdown key="more">
					<a-button :style="{ border: 'none', padding: 0 }">
						<!-- <share class="aut-icon" :style="{ fontSize: '20px', verticalAlign: 'top' }"></share class="aut-icon"> -->
						<share class="aut-icon"></share>
					</a-button>
					<template #overlay>
						<a-menu>
							<a-menu-item>
								<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/"> 1st menu item </a>
							</a-menu-item>
							<a-menu-item>
								<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/"> 2nd menu item </a>
							</a-menu-item>
							<a-menu-item>
								<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/"> 3rd menu item </a>
							</a-menu-item>
						</a-menu>
					</template>
				</a-dropdown>
			</template>
			<a-row class="content">
				<div style="flex: 1">
					<p>
						Ant Design interprets the color system into two levels: a system-level color system and
						a product-level color system.
					</p>
					<p>
						Ant Design&#x27;s design team preferred to design with the HSB color model, which makes
						it easier for designers to have a clear psychological expectation of color when
						adjusting colors, as well as facilitate communication in teams.
					</p>
					<div>
						<template v-for="item in iconLinks" :key="item.src">
							<a class="example-link">
								<img class="example-link-icon" :src="item.src" :alt="item.text" />
								{{ item.text }}
							</a>
						</template>
					</div>
				</div>
				<div class="image">
					<img src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg" alt="content" style="width: 100%" />
				</div>
			</a-row>
		</a-page-header>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">响应式</a-divider><!-- =============================================================== -->
	<p class="desc">在不同大小的屏幕下，应该有不同的表现。</p>
	<div class="components-page-header-demo-responsive" style="border: 1px solid rgb(235, 237, 240)">
		<a-page-header title="Title" sub-title="This is a subtitle" @back="() => $router.go(-1)">
			<template #extra>
				<a-button key="3">Operation</a-button>
				<a-button key="2">Operation</a-button>
				<a-button key="1" type="primary">Primary</a-button>
			</template>
			<template #footer>
				<a-tabs>
					<a-tab-pane key="1" tab="详情"></a-tab-pane>
					<a-tab-pane key="2" tab="规则"></a-tab-pane>
				</a-tabs>
			</template>
			<div class="content">
				<div class="main">
					<a-descriptions size="small" :column="2">
						<a-descriptions-item label="Created">Lili Qu</a-descriptions-item>
						<a-descriptions-item label="Association"><a>421421</a></a-descriptions-item>
						<a-descriptions-item label="Creation Time">2017-01-10</a-descriptions-item>
						<a-descriptions-item label="Effective Time">2017-10-10</a-descriptions-item>
						<a-descriptions-item label="Remarks">Gonghu Road, Xihu District, Hangzhou, Zhejiang, China</a-descriptions-item>
					</a-descriptions>
				</div>
				<div class="extra">
					<div :style="{ display: 'flex',width: 'max-content',justifyContent: 'flex-end', }">
						<a-statistic title="Status" value="Pending" :style="{ marginRight: '32px', }"></a-statistic>
						<a-statistic title="Price" prefix="$" :value="568.08"></a-statistic>
					</div>
				</div>
			</div>
		</a-page-header>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">白底模式</a-divider><!-- =============================================================== -->
	<p class="desc">默认 PageHeader 是透明底色的。在某些情况下，PageHeader 需要自己的背景颜色。</p>
	<div class="demo-page-header" style="background-color: #f5f5f5; padding: 24px">
		<a-page-header :ghost="ghost" title="Title" sub-title="This is a subtitle" @back="() => $router.go(-1)">
			<template #extra>
				<a-button key="3">Operation</a-button>
				<a-button key="2">Operation</a-button>
				<a-button key="1" type="primary">Primary</a-button>
			</template>
			<a-descriptions size="small" :column="3">
				<a-descriptions-item label="Created">Lili Qu</a-descriptions-item>
				<a-descriptions-item label="Association"><a>421421</a></a-descriptions-item>
				<a-descriptions-item label="Creation Time">2017-01-10</a-descriptions-item>
				<a-descriptions-item label="Effective Time">2017-10-10</a-descriptions-item>
				<a-descriptions-item label="Remarks">Gonghu Road, Xihu District, Hangzhou, Zhejiang, China</a-descriptions-item>
			</a-descriptions>
		</a-page-header>
	</div>
	<a-checkbox v-model:checked="ghost" style="margin-top: 0.5rem">toggle ghost</a-checkbox>
	
	
	
	
	
	
	
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		routes: [
			{path: 'index',breadcrumbName: 'First-level Menu',},
			{path: 'first',breadcrumbName: 'Second-level Menu',},
			{path: 'second',breadcrumbName: 'Third-level Menu',},
		],
		
		iconLinks: [
			{src: 'https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg',text: 'Quick Start',},
			{src: 'https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg',text: 'Product Info',},
			{src: 'https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg',text: 'Product Doc',},
		],
		
		ghost: false,
		
	}
},
methods:{
	backPage(){
		console.log('backPage');
	},
	hello(par){
		this.message = "参数值为：" + par;
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
